<template>
  <div class="faqs">
    <div class="ftitle">FAQs</div>
    <div class="container maxw">
      <div class="faqsbox">
        <el-row
          class="sitem"
          v-for="(item, index) in faqlist"
          :key="'i' + index"
        >
          <el-col :span="24" class="title">
            <div class="grid-content">{{ item.title.toUpperCase() }}</div>
          </el-col>
          <el-col :span="24" class="details">
            <div class="grid-content">
              <p
                v-for="(sitem, index) in item.details"
                :key="'s' + index"
                v-html="sitem"
              ></p>
            </div>
          </el-col>
          <el-col :span="24" class="lines">
            <div class="line"></div>
          </el-col>
        </el-row>
        <div class="btnbox">
          <button type="button" class="toregbtn" @click="$router.push('/reg')">
            Register Now
          </button>
          <p
            class="already"
            @click="$router.push({ path: '/reg', query: { from: 'already' } })"
          >
            Already registered?
          </p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      faqlist: [
        {
          title: "What is the conference cost?",
          details: [
            "The Conference fee is USD950/RMB6,688. ",
            "Flights, accommodation, airport transfers and incidentals are additional charges.    ",
          ],
        },
        {
          title: "How do I book flights? ",
          details: [
            "All travel to Haikou should be booked following your usual business travel procedures and adhering to your business travel policy.",
            "Once registered and the fee has been paid, please proceed to book your flights – we advise booking soon to secure the best rates. ",
          ],
        },
        {
          title: "Where will I stay?  ",
          details: [
            `There are different types of rooms available for the duration of the Conference. You can check the accomodation packages on the "Payment" page and make room reseration via the link provided on the page.Please do not forward this link as it is personalized to you.  `,
            `If you opt to share rooms, please share guest details via <a href="rc.hakrz.reservation@ritzcarlton.com" style="color:#121212;text-decoration: underline;">rc.hakrz.reservation@ritzcarlton.com</a> with hotel team as required.`,
            "Please link your booking to your Marriott Bonvoy number. If you’re not already a member, do make sure to sign up to Marriott Bonvoy – you’ll be able to collect points and unlock other benefits.   ",
            `If you have any questions about your stay, please email <a href="rc.hakrz.reservation@ritzcarlton.com" style="color:#121212;text-decoration: underline;">rc.hakrz.reservation@ritzcarlton.com</a> `,
          ],
        },
        {
          title: "What time should I arrive? ",
          details: [
            "The registratiom starts in the morning of November 27 and the welcome reception is at 18:00, November 27. You should plan to arrive in good time to check-in and receive your conference badge.  ",
          ],
        },
        {
          title: "When does the conference end?  ",
          details: [
            "Please check with your ADHR for arrangements on the morning of November 30, otherwise you may depart any time after 18:00, November 29, 2023",
          ],
        },
        {
          title: "Will there be time to explore the city?",
          details: [
            "We’d absolutely encourage you to explore Haikou. The GC HR Conference will officially open with a Welcome Reception from 18:00 pm, November 27. Feel free to arrive ahead of this to see the city.",
          ],
        },
        {
          title: "What is the agenda?",
          details: [
            "We have a brilliant conference lined up that will include a host of incredible guest speakers from both within Marriott (including the Global Leadership Team) and the outside world. We’re looking forward to coming together and celebrating your hard work and achievements, whilst also using the time to refocus, share best practices and look to the future.",
            "A full agenda will be published closer to the time.  ",
          ],
        },
        {
          title: "What is the dress code? ",
          details: [
            "The Conference daytime dress code is Business Casual. For all evening events, we will advise the dress code at a later date. ",
          ],
        },
        {
          title: "Where do I go with questions? ",
          details: [
            "For questions about flight bookings please refer to your standard business travel policy and procedures.",
            "Further details on the agenda will be released closer to the Conference date. ",
            `For questions about hotel arrangement, please reach out to hotel team via <a href="rc.hakrz.reservation@ritzcarlton.com" style="color:#121212;text-decoration: underline;">rc.hakrz.reservation@ritzcarlton.com</a>.`,
            "Please direct any further questions to your Area Leader, who will reach out to the Conference team for answers accordingly. ",
          ],
        },
      ],
    };
  },
};
</script>
<style lang="less" scoped>
.faqs {
  .container {
    padding: 4rem 0 2rem 0;
    text-align: right;
    background: #eeeded;
    .faqsbox {
      width: 85%;
      margin: auto;
      .sitem {
        padding: 0 1rem;
        text-align: left;
        .title {
          text-align: left;
          font-size: 1.125rem;
          font-family: "RidleyBold";
          color: #f18f61;
          line-height: 1.3;
        }
        .details {
          padding-top: 0.8rem;
          .grid-content {
            p {
              padding-bottom: 0.8rem;
              line-height: 1.3;
            }
            p:last-child {
              padding-bottom: 0;
            }
          }
        }
        .lines {
          padding: 1.5rem 0;
          .line {
            border-top: 1px dotted #cacaca;
            box-sizing: border-box;
          }
        }
      }
      .btnbox {
        text-align: center;
        .toregbtn {
          margin: 2rem auto 0.2rem;
        }
        .already {
          color: #000000;
          padding-bottom: 2rem;
        }
      }
    }
  }
}
@media only screen and (max-width: 600px) {
  .faqs {
    .container {
      padding: 2rem 0;
      .faqsbox {
        .sitem {
          .title {
            font-size: 0.9rem;
          }
          .details {
            padding-top: 0.3rem;
            .grid-content {
              p {
                font-size: 0.8rem;
              }
            }
          }
          .lines {
            padding: 1rem 0;
          }
        }
      }
    }
  }
}
</style>
